<!--
 * @Description: 桌面端登录
 * @Author: seadon
 * @LastEditors: seadon
 * @Date: 2021-07-12 11:31:28
 * @LastEditTime: 2022-09-21 20:40:12
-->
<template>
	<div class="mobile-login">
		<div class="mobile-login-lang">
			<a-dropdown trigger="click" placement="bottomRight">
				<span class="lang-active" @click.prevent>
					<i class="low-code iconsupplier_web_normal lang-icon"></i>
					{{ currentValue.name }}
					<i class="low-code iconxiangyou1 lang-icon"></i>
				</span>
				<template #overlay>
					<div class="lang-list">
						<span
							v-for="(lang, index) in language"
							:key="index"
							class="lang-list-item"
							:class="{ active: lang.value === currentValue.value }"
							@click="changeLocale(lang)"
						>
							{{ lang.name }}
						</span>
					</div>
				</template>
			</a-dropdown>
		</div>
		<div class="mobile-login-logo">
			<div class="logo">
				<img v-if="logoUrl" :src="logoUrl" />
			</div>
			<p class="logo-title" v-if="!hasOutsideOrg">登录</p>
			<div class="logo-text" v-if="hasOutsideOrg">
				<span
					class="inside"
					:class="{ active: loginType === 'inside' }"
					@click="changeType('inside')"
					>{{ pageType === 'login' ? t.InternalLogin : '用户注册' }}</span
				>
				<span
					class="outside"
					:class="{ active: loginType === 'outside' }"
					@click="changeType('outside')"
					>{{ pageType === 'login' ? t.ExternalLogin : '组织注册' }}</span
				>
			</div>
		</div>
		<div class="mobile-info">
			<div v-show="pageType === 'login'">
				<div v-show="loginType === 'inside'">
					<a-form
						:model="insideUserInfo"
						layout="vertical"
						class="mobile-info-form"
					>
						<a-form-item :label="t.account">
							<a-input
								v-model:value="insideUserInfo.account"
								autocomplete="off"
								:placeholder="t.insideAccountNumber"
								@change="handleRememberInsideAccount"
								@pressEnter="handleEnterAccount"
							></a-input>
						</a-form-item>
						<a-form-item :label="t.password" class="info-password">
							<a-input-password
								ref="passwordRef"
								v-model:value="insideUserInfo.password"
								autocomplete="off"
								:placeholder="t.inputPassword"
								@pressEnter="handleEnterPassword"
							></a-input-password>
						</a-form-item>
						<a-form-item
							v-if="isShowCaptcha"
							:label="t.captcha"
							class="info-password"
						>
							<div style="position: relative">
								<a-input
									ref="captchaRef"
									v-model:value="insideUserInfo.captcha"
									autocomplete="off"
									:placeholder="t.inputCaptcha"
									style="width: 155px"
									@pressEnter="handleEnterCaptcha"
								/>
								<img
									style="
										position: absolute;
										right: 0;
										bottom: 0;
										width: 160px;
										height: 40px;
										margin-left: 10px;
										cursor: pointer;
									"
									alt="图形验证码"
									:src="
										path.getFullPath(
											'/ego_base_info/v1/public/pwd/captcha?uuid=' + uuid
										)
									"
									@click="handleChangeCaptcha"
								/>
							</div>
						</a-form-item>
						<a-checkbox
							v-model:checked="insideRememberAccount"
							class="info-account"
							@change="insideCheckChange"
							>{{ t.rememberNumber }}</a-checkbox
						>
					</a-form>
				</div>
				<div v-show="loginType === 'outside'">
					<a-form
						:model="outsideUserInfo"
						layout="vertical"
						class="mobile-info-form"
					>
						<a-form-item :label="t.account">
							<a-input
								v-model:value="outsideUserInfo.account"
								autocomplete="off"
								:placeholder="t.outsideAccountNumber"
								@change="handleRememberOutsideAccount"
								@press-enter="handleEnterAccount"
							></a-input>
						</a-form-item>
						<a-form-item :label="t.password" class="info-password">
							<a-input-password
								ref="outsidePasswordRef"
								v-model:value="outsideUserInfo.password"
								autocomplete="off"
								:placeholder="t.inputPassword"
								@press-enter="handleOusideEnterPassword"
							></a-input-password>
						</a-form-item>
						<a-checkbox
							v-model:checked="outsideRememberAccount"
							class="info-account"
							@change="outsideCheckChange"
							>{{ t.rememberNumber }}</a-checkbox
						>
					</a-form>
				</div>
				<div class="mobile-btn">
					<a-button
						type="primary"
						class="info-button"
						v-show="loginType === 'inside'"
						@click="login"
						>{{ t.signIn }}</a-button
					>
					<a-button
						type="primary"
						class="info-button"
						v-show="loginType === 'outside'"
						@click="outsideLogin"
						>{{ t.signIn }}</a-button
					>
					<div
						class="register-button"
						@click="register"
						v-show="loginType === 'outside'"
						v-if="hasRegister"
					>
						{{ t.register }}
					</div>
				</div>
			</div>
			<div v-show="pageType === 'register'">
				<p class="register-type-title">
					请选择注册的{{ loginType === 'inside' ? '用户' : '组织' }}类型
				</p>
				<ul class="register-list" v-show="loginType === 'inside'">
					<li v-for="item in store.state.outsideOrgRegisterListDeptList" @click="jumpToRegister(item,'user')">{{item.dept_type_name}}(用户)</li>
				</ul>
				<ul class="register-list" v-show="loginType === 'outside'">
					<li v-for="item in store.state.outsideOrgRegisterListDeptTypeList" @click="jumpToRegister(item,'dept')">{{item.dept_type_name}}(组织)</li>
				</ul>
				<p class="has-acount">
					已有账号？<span @click="goBack">返回登录</span>
				</p>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import {
	ref,
	computed,
	defineProps,
	reactive,
	unref,
	onMounted,
	defineEmits,
} from 'vue'
import { useStore } from 'vuex'
import { imAll, t } from '@/constant/login'
import moment from 'moment'
import './index.less'
import { path } from '@/utils'

const emit = defineEmits(['insideLogin','outsideLogin'])
const store = useStore()
const props = defineProps<{
	logoUrl: string
	hasRegister:boolean
}>()
const language = computed(
	() =>
		store.state.tenant?.language_list?.filter((item: any) => item.has_show) ??
		[]
)
const isShowCaptcha = computed(
	() => store.state.tenant?.security_config_map?.identify_code !== false
)
const insideRememberAccount = ref(false)
const outsideRememberAccount = ref(false)
const currentValue = reactive({
	name: '中文',
	value: 'zh-CN',
})
const isShowLang = ref(false)

const changeLocale = (lang: any) => {
	currentValue.name = lang.name
	currentValue.value = lang.value
	isShowLang.value = false
	localStorage.setItem('locale', lang.value)
	location.reload()
}

const insideUserInfo = reactive({
	account: '',
	password: '',
	captcha: '',
	captcha_id: '',
})
const outsideUserInfo = reactive({
	account: '',
	password: '',
})
// 是否开启外部组织登录
const hasOutsideOrg: any = computed(()=>store.state.tenant?.tenant_auth?.external_org)

// 页面类型
const pageType: any = ref('login')
// 登录类型
const loginType: any = ref('inside')
//切换登录登录组织
const changeType = (type: string) => {
	loginType.value = type
}
// 外部组织密码回车事件
const handleOusideEnterPassword = () => {
	outsideLogin()
}
const outsideLogin = () => {
	emit(
		'outsideLogin',
		outsideUserInfo.account.trim(),
		outsideUserInfo.password.trim(),
		currentValue.value
	)
}
const jumpToRegister = (detail:any,type:string)=>{
	window.open(`${detail[`register_${type}_url`]}?query=${detail.dept_type_uid}`)
}
const register = () => {
	pageType.value = 'register'
	loginType.value = 'inside'
}
const goBack = () => {
	pageType.value = 'login'
	loginType.value = 'inside'
}
// 账号回车事件
const passwordRef: any = ref('')
const handleEnterAccount = () => {
	passwordRef.value.focus()
}
const uuid = ref('')
const handleChangeCaptcha = () => {
	insideUserInfo.captcha_id = uuid.value = String(Math.random())
}

const login = async () => {
	emit('insideLogin', insideUserInfo, 'mobile', currentValue.value, () => {
		handleChangeCaptcha()
		insideUserInfo.captcha = ''
	})
}
const captchaRef: any = ref()
// 密码回车事件
const handleEnterPassword = () => {
	if (isShowCaptcha.value) {
		captchaRef.value.focus()
	} else {
		login()
	}
}

// 记住账号
const insideCheckChange = () => {
	const accountObj: any = {
		account: insideUserInfo.account,
		date: new Date(),
	}
	const accountString = JSON.stringify(accountObj)
	if (unref(insideRememberAccount)) {
		localStorage.setItem('insideAccountNumber', accountString)
	} else {
		localStorage.removeItem('insideAccountNumber')
	}
}
const outsideCheckChange = () => {
	const accountObj: any = {
		account: outsideUserInfo.account,
		date: new Date(),
	}
	const accountString = JSON.stringify(accountObj)
	if (unref(outsideRememberAccount)) {
		localStorage.setItem('outsideAccountNumber', accountString)
	} else {
		localStorage.removeItem('outsideAccountNumber')
	}
}

// 记住账号change事件
const handleRememberInsideAccount = () => {
	insideCheckChange()
}
const handleRememberOutsideAccount = () => {
	outsideCheckChange()
}


handleChangeCaptcha()

const handleEnterCaptcha = () => {
	login()
}

onMounted(() => {
	// 语言设置
	if (localStorage.getItem('locale')) {
		currentValue.value = localStorage.getItem('locale') || 'zh-CN'
		const currentName = unref(language)?.filter((item: any) => {
			return item.value === currentValue.value
		})
		currentValue.name = currentName[0].name
	} else {
		localStorage.setItem('locale', currentValue.value)
	}

	const insideAccountNumber: any = localStorage.insideAccountNumber || ''
	if (insideAccountNumber) {
		const accountObj: any = JSON.parse(insideAccountNumber)
		if (moment(new Date()).diff(accountObj.date, 'day') >= 7) {
			localStorage.removeItem('insideAccountNumber')
		} else {
			insideUserInfo.account = accountObj.account
			insideRememberAccount.value = true
		}
	}
	const outsideAccountNumber: any = localStorage.outsideAccountNumber || ''
	if (outsideAccountNumber) {
		const accountObj: any = JSON.parse(outsideAccountNumber)
		if (moment(new Date()).diff(accountObj.date, 'day') >= 7) {
			localStorage.removeItem('outsideAccountNumber')
		} else {
			outsideUserInfo.account = accountObj.account
			outsideRememberAccount.value = true
		}
	}
})
</script>
<style lang="less">
.mobile-login {
	position: absolute;
	width: 95%;
	height: 95%;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	border-radius: 12px;
	background: #ffffff;
	padding: 0 24px;
	box-sizing: border-box;
	&-lang {
		position: absolute;
		right: 20px;
		top: 15px;
		.lang-active {
			width: 100%;
			height: 24px;
			line-height: 24px;
			color: @rok-text-color-secondary;
			font-size: 12px;
			display: inline-block;
			text-align: right;
			cursor: pointer;
			.lang-icon {
				font-size: 12px;
			}
		}
	}
	.ant-form-vertical .ant-form-item-label > label {
		color: #8f959e;
		font-weight: normal;
	}
	&-logo {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		.logo-title {
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 600;
			font-size: 32px;
			line-height: 44px;
			text-align: center;
			color: #303142;
			margin-bottom: 0;
			margin-top: 20px;
		}
		.logo-text {
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 35px;
			width: 100%;
			margin-top: 25px;
			span {
				// display: flex;
				// flex-direction: column;
				// align-items: center;
				height: 35px;
				line-height: 35px;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 18px;
				text-align: center;
				color: #646a73;
				cursor: pointer;
				position: relative;
				user-select: none;
			}
			.active {
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 500;
				font-size: 20px;
				text-align: center;
				color: #1f2329;
				&::after {
					content: '';
					display: block;
					width: 28px;
					height: 4px;
					background: #4c78fc;
					border-radius: 20px;
					pointer-events: none;
					margin: 0 auto;
					margin-top: 7px;
				}
			}
		}
		.logo {
			max-height: 60px;
			margin-top: 45px;
			img {
				width: 100%;
				max-height: 60px;
			}
		}
	}
	.mobile-info {
		margin-top: 39px;
		.mobile-info-form {
			.ant-form-item {
				padding-bottom: 28px;
				.ant-form-item-label {
					color: #8f959e;
					font-size: 14px;
					line-height: normal;
				}
				.ant-form-item-control {
					border-bottom: 1px solid #dee0e3;
					.ant-input,
					.ant-input-affix-wrapper {
						border: none;
					}
				}
			}
		}
		.register-type-title {
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 14px;
			line-height: 20px;
			color: #646a73;
			text-align: center;
			margin-bottom: 22px;
		}
		.register-list {
			padding: 0;
			height: 300px;
			overflow-y: scroll;
			li {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 60px;
				background: #ffffff;
				border: 1px solid #dee0e3;
				border-radius: 4px;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 500;
				font-size: 14px;
				line-height: 20px;
				color: #1f2329;
				margin-bottom: 12px;
				cursor: pointer;
			}
			li:active {
				background: #ebf1ff;
				border: 1px solid #658bfc;
				border-radius: 4px;
			}
		}
		.has-acount {
			margin-top: 20px;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 500;
			font-size: 14px;
			line-height: 40px;
			text-align: center;
			color: #646a73;
			span {
				color: #4c78fc;
			}
		}
	}
	.mobile-btn {
		width: 100%;
		margin-top: 50px;
		.ant-btn {
			width: 100%;
			background: #4c78fc;
			border-radius: 4px;
			height: 44px;
			color: #ffffff;
			font-size: 16px;
			font-weight: normal;
		}
		.register-button {
			height: 42px;
			line-height: 42px;
			margin-top: 12px;
			background: #fff;
			border-radius: 4px;
			width: 100%;
			border: 1px solid #dee0e3;
			text-align: center;
			color: #646a73;
			font-weight: @rok-font-weight-bold;
			cursor: pointer;
		}
	}
}

.lang-list {
	width: 116px;
	padding: 8px 0;
	background: @rok-white-bg;
	box-shadow: 0px 4px 20px rgba(106, 114, 146, 0.2);
	border-radius: 2px;
	&-item {
		display: inline-block;
		height: 32px;
		line-height: 32px;
		cursor: pointer;
		width: 100%;
		padding: 0 18px;
		&:hover {
			background: @rok-hover-color;
		}
	}
	.active {
		position: relative;
	}
	.active::after {
		content: '';
		width: 2px;
		height: 32px;
		background: @rok-primary-color;
		position: absolute;
		left: 0;
		top: 0;
	}
}
</style>
